// 瀑布流插件
;(function ($) {
    $.fn.waterfall = function(options) {
        var df = {
            item: '.item',
            margin: 80,
            addfooter: true
        };
        options = $.extend(df, options);
        return this.each(function() {
            var $box = $(this), pos = [],
            _box_width = $box.width(),
            $items = $box.find(options.item),
            _owidth = $items.eq(0).outerWidth() + options.margin,
            _oheight = $items.eq(0).outerHeight() + options.margin,
            _num = Math.floor(_box_width/_owidth);
            (function() {
                var i = 0;
                for (; i < _num; i++) {
                    pos.push([i*_owidth+options.margin/2,0]);
                } 
            })();
            $items.each(function() {
                var _this = $(this),
                _temp = 0,
                _height = _this.outerHeight() + options.margin/2;
                _this.hover(function() {
                    _this.addClass('hover');
                },function() {
                    _this.removeClass('hover');
                });
                for (var j = 0; j < _num; j++) {
                    if(pos[j][1] < pos[_temp][1]){
                        //暂存top值最小那列的index
                        _temp = j;
                    }
                }
                this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;';
                //插入后，更新下该列的top值
                pos[_temp][1] = pos[_temp][1] + _height;
            });
            // 计算top值最大的赋给外围div
            (function() {
                var i = 0, tops = [];
                for (; i < _num; i++) {
                    tops.push(pos[i][1]);
                }
                tops.sort(function(a,b) {
                    return a-b;
                });
                $box.height(tops[_num-1]);
            })();
        });
    }
})(jQuery);





// header / 所有分类 / 点击动画
var all_class_h2 = $(".header_bottom .all_class h2"),
    all_class_ul = $(".header_bottom .all_class ul");
all_class_h2.on("click",function(){
  if(all_class_ul.css("display") == "none"){
    all_class_ul.slideDown(500);
  }else{
    all_class_ul.slideUp(500);
  }
})

//section / check_left / shape / 鼠标移上去背景改变
var pro_bar_shapebtn = $(".pro_bar_shapebox img");
var bgc_url = "";
pro_bar_shapebtn.on("mouseover",function(){
  bgc_url = $(this).attr("src");
  var count = $(this).attr("src").search("svg")-1;
  var new_bgc_url = $(this).attr("src").slice(0,count) + "2.svg";
  $(this).attr("src",new_bgc_url);
}).on("mouseout",function(){
  $(this).attr("src",bgc_url);
})
 // section / check_left / search / 点击搜索
 var search_btn = $(".check_left_search img");
 search_btn.on("click",function(){
  $(this).next("input").focus();
 })

 // section / check_center / 点击list效果
 var list_btn = $(".check_center .item span");
 list_btn.on("click",function(){
  if($(this).css("color") != "#000"){
    $(this).css({
      "color":"#000",
      "font-weight":"bold"
    })
  }
 })

// section / check_right / 鼠标移上显示解释

var explain_btn = $(".art_concept span");
explain_btn.on("mouseover",function(){
  var _this = $(this)
  var explain = $(".explain_box").find("h2");
  for(var i = 0;i < explain.length;i++){
    $(explain[i]).parent().css({"display":"none"})
    if($(explain[i]).text() == _this.text()){
      $(explain[i]).parent().css({"display":"block"})
    }
  }
}).on("click",function(){
  var _this = $(this);
  for(var j = 0;j < explain_btn.length;j++){
    $(explain_btn[j]).css({"font-weight":"normal"});
  }
  _this.css({"font-weight":"bold"});
  var explain = $(".explain_box").find("h2");
  for(var i = 0;i < explain.length;i++){
    $(explain[i]).parent().css({"display":"none"})
    if($(explain[i]).text() == _this.text()){
      $(explain[i]).parent().css({"display":"block"})
    }
  }
})

// section / arts_type_check_hidden / 点击高级筛选显示隐藏部分
var high_choose = $(".advanced_filter button");
high_choose.on("click",function(){
  if($(".advanced_filter button img").attr("src") == "imgs/jt_down.jpg"){
    $(".arts_type_check_hidden").slideDown(500);
    $(".arts_type_check").slideUp(500);
    $(".advanced_filter button img").attr("src","imgs/jt_up.jpg")
  }else{
    $(".arts_type_check_hidden").slideUp(500);
    $(".arts_type_check").slideDown(500);
    $(".advanced_filter button img").attr("src","imgs/jt_down.jpg")
  }
})

// section / arts_type_check_hidden / 筛选价格
var present_price = $(".pro_bar_hidden .price");
present_price.on("input",function(){
  var present_price_num = $(".pro_bar_hidden .price_num span");
  present_price_num.text($(this).val());
})

// section / arts_type_check_hidden / 筛选尺寸
var present_size = $(".pro_bar_hidden .size");
present_size.on("input",function(){
  var present_size_num = $(".pro_bar_hidden .size_num span");
  present_size_num.text($(this).val());
})

// section / arts_type_check_hidden / 筛选颜色
var present_color = $(".check_hidden_left .color_box");
present_color.on("mouseover",function(){
  $(this).css({
    "outline":"1px solid #adadad"
  })
}).on("mouseout",function(){
  $(this).css({
    "outline":"none"
  })
})

 // section / check_hidden_right / 点击list效果
 var list_hidden_btn = $(".check_hidden_right .item span");
 list_hidden_btn.on("click",function(){
  if($(this).css("color") != "#000"){
    $(this).css({
      "color":"#000",
      "font-weight":"bold"
    })
  }
 })

// 获取arts / 添加到页面中
var arts = art_data.content_name;
    // console.log(arts)
    var name = arts.art_name;
    for(var i = 0;i < arts.length;i++){
      var name = arts[i].art_name,
          genre = arts[i].art_genre,
          artist = arts[i].art_artist,
          size = arts[i].art_size,
          price = arts[i].art_price,
          site = arts[i].art_site,
          id = arts[i].id;
      // console.log(name);
      var img = $(`<div class="item">
            <div class="boxgrid caption">
              <a href="add_car.html?id=${id}">
                <img src="${site}" alt="">
              </a>
              <div class="img_info">
                <a href=""><p class="artist">${artist}</p></a>
                <a href=""><i class="name">${name}，<span class="year">2018</span></i><br></a>
                <i class="genre">
                  ${genre}
                  <span class="size">${size}</span>cm
                </i>
                <p class="price"><span>${price}</span></p>
              </div>
            </div>
          </div>`); 
      img.find("img").on("load",function(){    // 图片加载完成后
        $('#brand-waterfall').waterfall();      // 调用瀑布流
      })
      $(".contaier").append(img);
    }